<!--
 * @Author: yan_hai_dong 891236760@qq.com
 * @Date: 2022-06-10 10:55:00
 * @LastEditors: yan_hai_dong 891236760@qq.com
 * @LastEditTime: 2022-08-19 17:38:50
 * @FilePath: \new_xgmantd\src\views\artist\seas\list\XgmTable\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="xgm-table-body">
    <div class="table-body">
      <el-table
        :ref="tabRef"
        stripe
        :border="border"
        class="xgm-table nowrap-tab"
        :data="data"
        style="width: 100%"
        tooltip-effect="dark"
        header-align="center"
        :default-sort="defaultSort"
        row-key="id"
        :tree-props="treeProps"
        fit
        :height="height"
        :max-height="maxHeight"
        :span-method="spanMethod"
        :show-summary="showSummary"
        @selection-change="handleSelectionChange"
        @sort-change="sortChange"
        @header-click="headersort"
        @row-click="rowClick"
      >
        <el-table-column
          v-if="selection"
          type="selection"
          align="center"
          fixed="left"
        ></el-table-column>
        <el-table-column
          v-for="(
            {
              label,
              width,
              showOverflowTooltip,
              prop,
              fixed,
              sortable,
              minWidth,
            },
            i
          ) in sortColumns"
          :key="`${i}_${prop}`"
          header-align="center"
          align="center"
          :is-virtual="true"
          item-height="40"
          :label="label"
          :sortable="sortable"
          :min-width="minWidth"
          :width="width"
          :prop="prop"
          :fixed="fixed || false"
          :show-overflow-tooltip="showOverflowTooltip"
        >
          <!-- 默认表头 -->
          <template slot="header" slot-scope="scope">
            <slot :name="`header-${prop}`" :label="scope.column.label">
              <table-header-content :content="scope.column.label" />
            </slot>
          </template>
          <!-- 默认内容 -->
          <template slot-scope="scope">
            <slot :name="prop" :scope="scope">{{ scope.row[prop] }}</slot>
          </template>
        </el-table-column>

        <!-- 不勾选任何列时占位状态 -->
        <el-table-column v-if="showEmpty" min-width="0">
          <template slot="header">
            <span
              style="height: 23px; width: 0px; display: inline-block"
            ></span>
          </template>
          <span style="height: 23px; width: 0px; display: inline-block"></span>
        </el-table-column>

        <!-- 表设计 -->
        <el-table-column v-if="isSetUp" width="32" fixed="right" align="center">
          <template slot="header">
            <TableRowSetUp :options.sync="options" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import TableRowSetUp from './TableRowSetUp'
export default {
  components: {
    TableRowSetUp,
  },
  props: {
    columns: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    page: {
      type: Number,
      default: 1,
    },
    total: {
      type: Number,
      default: 0,
    },
    sort: {
      type: Object,
      default: () => ({
        order_key: '',
        order_type: '',
      }),
    },
    tabRef: {
      type: String,
      default: () => 'xgm-table',
    },
    // 是否显示选择框
    selection: {
      type: Boolean,
      default: false,
    },
    maxHeight: {
      type: [String, Number],
      default: null,
    },
    height: {
      type: [String, Number],
      default: null,
    },
    isSetUp: {
      type: Boolean,
      default: true,
    },
    // 表格合并
    spanMethod: {
      type: Function,
      default: () => {},
    },
    border: {
      type: Boolean,
      default: false,
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    treeProps: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      showColumns: [],
    }
  },
  computed: {
    queryParam: {
      get() {
        return {
          page: this.page,
          pageSize: this.pageSize,
        }
      },
      set({ page, pageSize }) {
        this.$emit('update:page', page)
        this.$emit('update:pageSize', pageSize)
      },
    },
    sortColumns: {
      get() {
        let val = this.options
          .filter(({ show }) => show)
          .map((item) => {
            return {
              ...this.columns.find((col) => col.prop === item.prop),
              ...item,
            }
          })
        this.$emit('update:columns', val)
        return val
      },
    },
    showEmpty: {
      get() {
        // return this.sortColumns.length > 16
        //   ? false
        //   : this.sortColumns.every((item) => item.width);
        return this.sortColumns.every((item) => item.width)
      },
    },
    // 表格数据配置
    options: {
      get() {
        return this.showColumns
      },
      set(val) {
        this.showColumns = val
        this.infoTable()
      },
    },
    defaultSort() {
      let { order_key, order_type } = this.sort
      return {
        prop: order_key,
        order: order_type,
      }
    },
  },
  created() {
    this.infoShowRow()
  },
  methods: {
    getList() {},
    infoTable() {
      this.$refs[this.tabRef].doLayout()
    },
    // 选择改变 返回当前选择的数据
    handleSelectionChange(val) {
      this.$emit('selectionChange', val)
    },
    // 排序
    sortChange(val) {
      this.$emit('sortChange', val)
    },
    headersort(e) {},
    // 初始化表格显示列
    infoShowRow() {
      let flag = false
      if (flag) this.showColumns = []
      else
        this.showColumns = JSON.parse(JSON.stringify(this.columns)).map(
          ({ label, prop, fixed, forbid, hidden }) => ({
            label,
            prop,
            fixed,
            show: !hidden,
            forbid,
          })
        )
    },
    clearSelection() {
      this.$refs[this.tabRef].clearSelection()
    },
    rowClick(row, column, event) {
      this.$emit('rowClick', row, column, event)
    },
  },
}
</script>

<style lang="scss" scoped>
.xgm-table-body {
  .table-body {
    position: relative;
    // border: 1px solid #e5e9f2;
    // border-bottom: none;
    border-right: 1px solid #e5e9f2;
  }
  @import './table.scss';
  ::v-deep .el-checkbox .el-checkbox__inner {
    border-radius: 4px;
  }
  ::v-deep.el-table-column--selection .cell {
    padding-left: 14px;
  }
}
</style>
<style>
.el-tooltip__popper.is-dark {
  max-width: 300px;
}
</style>
